<template>
	<page-meta :page-style="$theme.pageStyle">
		<!-- #ifndef H5 -->
		<navigation-bar :front-color="$theme.navColor" :background-color="$theme.navBgColor" />
		<!-- #endif -->
	</page-meta>
	<view class="news-detail bg-white">
		<!-- 标题信心 -->
		<view class="news-detail-header py-[20rpx] px-[30rpx]">
			<view class="text-3xl font-medium">{{ newsData.name }}</view>

			<view class="flex mt-[20rpx] text-lg">
				<view class="mr-[40rpx] flex-1">{{ newsData.real_name }} &nbsp;&nbsp;&nbsp;&nbsp; {{ newsData.phone }}</view>
			</view>
			
			<view class="text-lg w-full flex justify-between mt-[12rpx]" @click="goto">
				<view>{{ newsData.address }}</view>
				<u-icon name="map" width="45" height="45" color="#5274EB"></u-icon>
			</view>
		</view>

		<!-- 咨询内容 -->
		<view class="news-detail-section bg-white p-[24rpx]">
			<!-- 内容 -->
			<view class="mt-[20rpx]">
				<u-parse :html="newsData.content"></u-parse>
			</view>
		</view>
	</view>
</template>

<script lang="ts" setup>
import { ref, reactive } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import { about } from '@/api/shop';

const newsData = ref<any>({});

let formData = reactive([]);

const getData = async () => {
	newsData.value = await about();
};

const goto = async () => {
	if (!newsData.value.lat || !newsData.value.lng || !newsData.value.address) return uni.$u.toast('位置错误，请联系客服');
	uni.openLocation({
		latitude: Number(newsData.value.lat), // 目标地点的纬度，浮点数，范围为-90~90
		longitude:Number(newsData.value.lng), // 目标地点的经度，浮点数，范围为-180~180
		scale: 18, // 缩放比例，范围5~18
		name: newsData.value.address, // 位置名
		address: newsData.value.address, // 地址的详细说明
		success() {
			console.log('导航打开成功');
		},
		fail(error) {
			console.log('导航打开失败', error);
		}
	});
};

onLoad((options: any) => {
	getData();
});
</script>

<style lang="scss">
.news-detail {
	height: 100%;
	background: rgba(255, 255, 255, 0.95);

	&-header {
		border-bottom: 2rpx solid #f8f8f8;
	}
}
</style>
